<template>
  <div class="forum-detail-wrap">
    <div class="head">
      <div class="head-left">
        <div class="breadcrumb">
          <div class="breadcrumb-item">
            <img src="@/assets/img/home.png" alt="" />
            <span>论坛 > </span>
          </div>
          <div class="breadcrumb-item">
            <span>{{ info.type_title || "" }} > </span>
          </div>
          <div class="breadcrumb-item">
            <span>详情</span>
          </div>
        </div>
      </div>
      <div class="head-right">
        <div class="push" @click="pushFun">发新帖</div>
      </div>
    </div>

    <div class="card">
      <div class="title">
        <div class="title-left">
          <div class="title-tip" v-if="info.is_top == 1">置顶</div>
          <div class="title-desc u-line-1">{{ info.title || "" }}</div>
        </div>
        <div class="title-right">
          <div class="item-user" v-if="info.user_info">
            <div class="item-user-logo">
              <img v-if="info.user_info.image" :src="info.user_info.image" alt="" />
              <img v-else src="@/assets/img/touxiang.png" alt="" />
            </div>
            <div class="item-user-content">
              <div class="item-user-name">{{ info.user_info.name }}</div>
              <div class="item-user-desc">
                {{ info.user_info.bm_title }} {{ info.user_info.profession }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content-top">
          <div class="content-top-left">
            <span>{{ info.type_title || "" }} · </span>
            <span style="color: #9fa6c2">{{ info.created_at || "" }}</span>
          </div>
          <div class="content-top-right">
            <div class="item-content-icon" @click.stop="commentFun(info.id, 0)">
              <img src="@/assets/img/icon-pinglun.png" alt="" />
              <span>评论</span>
              <span style="color: #9fa6c2">({{ info.comment_num || 0 }})</span>
            </div>
            <div class="item-content-icon" @click.stop="zanFun">
              <img v-if="info.is_like == 1" src="@/assets/img/icon-dianzan2.png" alt="" />
              <img v-else src="@/assets/img/icon-dianzan.png" alt="" />
              <span>点赞</span>
              <span style="color: #9fa6c2">({{ info.like_num || 0 }})</span>
            </div>
          </div>
        </div>
        <div class="html" v-html="info.content || ''"></div>
      </div>
    </div>

    <!-- 评论 -->
    <div class="card" v-if="commentList.length > 0">
      <div class="title">
        <div class="title-left">
          <div class="title-desc">全部评论·{{ info.comment_num || 0 }}</div>
        </div>
        <div class="title-right">
          <div class="push" @click="commentFun(info.id, 0, 0)">评论</div>
        </div>
      </div>
      <div class="comment">
        <div class="comment-view" v-for="(item, index) in commentList" :key="index">
          <div
            class="comment-item"
            :class="{ 'comment-item-pointer': true }"
            @click="adminItemFun(item)"
          >
            <div class="comment-item-left" v-if="item.user_info">
              <div class="comment-user">
                <img v-if="item.user_info.image" :src="item.user_info.image" alt="" />
                <img v-else src="@/assets/img/touxiang.png" alt="" />
                <div class="comment-user-name u-line-1">{{ item.user_info.name }}</div>
              </div>
            </div>
            <div class="comment-main">
              <p>{{ item.content }}</p>
              <div class="comment-footer">
                <div class="comment-footer-left">
                  <div class="comment-tip" v-if="item.is_best == 1">最佳评论</div>
                  <span>{{ item.created_at }}</span>
                </div>
                <div class="comment-footer-right">
                  <div
                    class="comment-footer-item"
                    @click.stop="commentFun(info.id, item.id, 0, item)"
                  >
                    <img src="@/assets/img/icon-pinglun.png" alt="" />
                    <span>回复</span>
                  </div>
                  <div class="comment-footer-item" @click.stop="commentZanFun(item)">
                    <img
                      v-if="item.is_like == 1"
                      src="@/assets/img/icon-dianzan2.png"
                      alt=""
                    />
                    <img v-else src="@/assets/img/icon-dianzan.png" alt="" />
                    <span>点赞</span>
                    <span style="color: #9fa6c2; margin-left: 0.1rem"
                      >({{ item.like_num || 0 }})</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="comment-more" v-if="!item.showChildred">
            <div class="comment-more-text">展开 {{ item.child.count }} 条回复</div>
          </div>
          <div class="comment-child" v-else-if="item.child.count > 0">
            <div
              class="comment-item"
              :class="{ 'comment-item-pointer': true }"
              @click="adminItemFun(val)"
              v-for="(val, key) in item.child.list"
              :key="key"
            >
              <div class="comment-item-left" v-if="val.user_info">
                <div class="comment-user">
                  <img v-if="val.user_info.image" :src="val.user_info.image" alt="" />
                  <img v-else src="@/assets/img/touxiang.png" alt="" />
                  <div class="comment-user-name u-line-1">{{ val.user_info.name }}</div>
                </div>
              </div>
              <div class="comment-main">
                <p>
                  <span>回复</span
                  ><span style="color: #999999; margin: 0 0.0625rem">{{
                    val.c_user_name
                  }}</span>
                  {{ val.content }}
                </p>
                <div class="comment-footer">
                  <div class="comment-footer-left">
                    <div class="comment-tip" v-if="val.is_best == 1">最佳评论</div>
                    <span>{{ val.created_at }}</span>
                  </div>
                  <div class="comment-footer-right">
                    <div
                      class="comment-footer-item"
                      @click.stop="commentFun(info.id, item.id, val.id, val)"
                    >
                      <img src="@/assets/img/icon-pinglun.png" alt="" />
                      <span>回复</span>
                    </div>
                    <div class="comment-footer-item" @click.stop="commentZanFun(val)">
                      <img
                        v-if="val.is_like == 1"
                        src="@/assets/img/icon-dianzan2.png"
                        alt=""
                      />
                      <img v-else src="@/assets/img/icon-dianzan.png" alt="" />
                      <span>点赞</span>
                      <span style="color: #9fa6c2; margin-left: 0.1rem"
                        >({{ val.like_num }})</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="comment-more"
              v-if="item.child.count > item.child.list.length"
              @click="getCommentTwoListFun(item)"
            >
              <div class="comment-more-text">
                展开 {{ item.child.count - item.child.list.length }} 条回复
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="currentPageFun"
        >
        </el-pagination>
      </div>
    </div>

    <div class="m-bottom-empty"></div>

    <ForumComment ref="ForumComment" @submit="commentSubmitFun"></ForumComment>
    <ForumPush ref="ForumPush"></ForumPush>
    <ForumAdmin
      ref="ForumAdmin"
      @refresh="getCommentListFun"
      @comment="commentFun"
    ></ForumAdmin>
  </div>
</template>

<script>
import _cache from "@/utils/cache.js";

import ForumComment from "./pageComponents/forum-comment.vue";
import ForumPush from "./pageComponents/forum-push.vue";
import ForumAdmin from "./pageComponents/forum-admin.vue";
import { mapState } from "vuex";
import {
  getForumDetail,
  addLikeForum,
  getCommentList,
  getCommentTwoList,
  addLikeComment,
} from "@/api/forum";
import { mustLogin } from "@/utils/utils";
export default {
  components: {
    ForumComment,
    ForumPush,
    ForumAdmin,
  },
  data() {
    return {
      info: {},
      params: {
        page: 1,
        limit: 10,
      },
      commentList: [],
      total: 0,
    };
  },
  computed: {
    ...mapState(["isLogin", "user_info"]),
  },
  mounted() {
    this.getDetailFun();
    this.getCommentListFun();
  },
  methods: {
    //发布者操作
    adminItemFun(item) {
      mustLogin.call(this, () => {
        if (this.info.user_id != this.user_info.id) return false;
        this.$refs.ForumAdmin.open(item);
      });
    },
    pushFun() {
      mustLogin.call(this, () => {
        this.$refs.ForumPush.open();
      });
    },
    getDetailFun() {
      getForumDetail({ id: this.$route.params.id }).then((res) => {
        if (res.code == 200) {
          this.info = res.data;
        } else {
          this.$message.error(res.msg);
          this.$router.go(-1);
        }
      });
    },
    commentFun(f_id, c_id, cc_id, item = null) {
      let token = _cache.get("token");
      console.warn("token", token);
      if (!token) {
        this.$confirm("请您登录后进行评论操作,是否去登录？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {});
      } else {
        this.$refs.ForumComment.open({
          f_id,
          c_id,
          cc_id,
          item,
        });
      }
    },
    commentSubmitFun() {
      this.getDetailFun();
      this.getCommentListFun();
    },
    commentZanFun(item) {
      let token = _cache.get("token");
      console.warn("token", token);

      if (!token) {
        this.$confirm("请您登录后进行点赞操作,是否去登录？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {});
      } else {
        mustLogin.call(this, () => {
          addLikeComment({ id: item.id }).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.msg);
              item.is_like = item.is_like == 1 ? 0 : 1;
              if (item.is_like == 1) {
                item.like_num += 1;
              } else {
                item.like_num -= 1;
              }
            } else {
              this.$message.error(res.msg);
            }
          });
        });
      }
    },
    zanFun() {
      let token = _cache.get("token");
      console.warn("token", token);

      if (!token) {
        this.$confirm("请您登录后进行点赞操作,是否去登录？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {});
      } else {
        mustLogin.call(this, () => {
          addLikeForum({ id: this.$route.params.id }).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.msg);
              this.getDetailFun();
            }
          });
        });
      }
    },
    currentPageFun(page) {
      this.params.page = page;
      this.getCommentListFun();
    },
    getCommentListFun() {
      getCommentList({ ...this.params, f_id: this.$route.params.id }).then((res) => {
        if (res.code == 200) {
          let list = res.data.list || [];
          list.forEach((item) => {
            item["showChildred"] = true;
            item["params"] = {
              page: 1,
              limit: 10,
            };
            // item.child.count += 2
          });
          this.commentList = res.data.list || [];
          this.total = res.data.count;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getCommentTwoListFun(item) {
      getCommentTwoList({ ...item.params, f_id: this.info.id, c_id: item.id }).then(
        (res) => {
          if (res.code == 200) {
            let list = res.data.list || [];
            if (item.params.page == 1) {
              item.child.list = [];
            }
            item.params.page += 1;
            item.child.list = item.child.list.concat(list);
          } else {
            this.$message.error(res.msg);
          }
        }
      );
    },
  },
};
</script>

<style lang="less">
.html {
  img {
    max-width: 100%;
    height: auto;
  }
}
</style>

<style lang="less" scoped>
.forum-detail-wrap {
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.625rem;

    .head-right {
      .push {
        text-align: center;
        line-height: 0.5rem;
        width: 1.5625rem;
        height: 0.5rem;
        background: #4f8af8;
        font-size: 0.2rem;
        color: #fff;
        border-radius: 0.1rem;
        cursor: pointer;
        user-select: none;
      }
    }
  }

  .card {
    border: 0.0125rem solid rgba(#64aefb, 0.1);
    border-radius: 0.0625rem;
    margin-bottom: 0.475rem;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 0.875rem;
      background: rgba(#64aefb, 0.1);
      border-top-left-radius: 0.0375rem;
      border-top-right-radius: 0.0375rem;
      padding: 0 0.5rem;

      .title-left {
        display: flex;
        align-items: center;
        width: 12.5rem;
      }

      .title-right {
        .push {
          text-align: center;
          line-height: 0.5rem;
          width: 1.5625rem;
          height: 0.5rem;
          background: #4f8af8;
          font-size: 0.2rem;
          color: #fff;
          border-radius: 0.1rem;
          cursor: pointer;
          user-select: none;
        }

        .item-user {
          display: flex;
          align-items: center;
          flex: 1;
          justify-content: flex-end;

          .item-user-logo {
            width: 0.55rem;
            height: 0.55rem;
            margin-right: 0.2rem;

            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .item-user-name {
            font-size: 0.2rem;
            color: #4f8af8;
            font-weight: bold;
          }

          .item-user-desc {
            font-size: 0.125rem;
            color: #666;
            padding-top: 0.05rem;
          }
        }
      }

      .title-desc {
        font-size: 0.25rem;
        color: #000;
        line-height: 0.35rem;
        font-weight: 600;
      }

      .title-tip {
        width: 0.6rem;
        height: 0.3rem;
        background: #f18c3c;
        border-radius: 0.025rem;
        text-align: center;
        line-height: 0.3rem;
        font-size: 0.15rem;
        color: #ffffd2;
        margin-right: 0.25rem;
      }
    }

    .comment {
      padding: 0 0.475rem;

      .comment-view {
        border-bottom: 0.0125rem solid rgba(#64aefb, 0.1);
        .comment-item-pointer {
          cursor: pointer;
        }
        .comment-item {
          display: flex;
          padding: 0.475rem 0;

          .comment-user {
            display: flex;
            align-items: center;
            font-size: 0.2rem;
            color: #000;
            flex-shrink: 0;
            margin-right: 0.125rem;

            img {
              width: 0.5rem;
              height: 0.5rem;
              border-radius: 50%;
              margin-right: 0.25rem;
            }

            .comment-user-name {
              width: 1.25rem;
            }
          }

          .comment-main {
            flex: 1;

            p {
              margin: 0;
              font-size: 0.175rem;
              color: #000;
              line-height: 0.25rem;
            }

            .comment-footer {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-top: 0.3125rem;

              .comment-footer-left {
                display: flex;
                align-items: center;
                font-size: 0.175rem;
                color: #9fa6c2;

                .comment-tip {
                  width: 0.9rem;
                  height: 0.3rem;
                  background: #f18c3c;
                  font-size: 0.15rem;
                  color: #ffffd2;
                  text-align: center;
                  line-height: 0.3rem;
                  margin-right: 0.375rem;
                }
              }

              .comment-footer-right {
                display: flex;
                align-items: center;

                .comment-footer-item {
                  display: flex;
                  align-items: center;
                  font-size: 0.2rem;
                  color: #000;
                  margin-left: 0.4rem;
                  cursor: pointer;
                  user-select: none;

                  img {
                    width: 0.2rem;
                    height: 0.2rem;
                    margin-right: 0.05rem;
                  }
                }
              }
            }
          }
        }

        .comment-more {
          padding-left: 2.125rem;
          padding-bottom: 0.375rem;

          .comment-more-text {
            font-size: 0.175rem;
            color: #1a37b9;
            cursor: pointer;
            user-select: none;
          }
        }

        .comment-child {
          .comment-item {
            padding-top: 0;
            padding-left: 0.625rem;
          }
          .comment-more {
            padding-left: 2.75rem;
          }
        }
      }
    }

    .content {
      padding: 0.5rem;

      .content-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .content-top-left {
          font-size: 0.2rem;
          color: #000;
        }

        .content-top-right {
          display: flex;
          align-items: center;

          .item-content-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.2rem;
            color: #000;
            margin-left: 0.4rem;
            cursor: pointer;
            user-select: none;

            span {
              margin-right: 0.1rem;
            }

            img {
              width: 0.2rem;
              height: 0.2rem;
              margin-right: 0.05rem;
            }
          }
        }
      }

      .html {
        padding-top: 0.375rem;
        font-size: 0.2rem;
        color: #000;
        line-height: 0.3rem;
        img {
          max-width: 100%;
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: center;
      padding: 0.625rem 0 1rem;
    }
  }

  .m-bottom-empty {
    width: 100%;
    height: 0.875rem;
  }
}
</style>
